<template>
  <div class="about_us">
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal" @getMenuList="getMenuList" @handleChangeLan="handleChangeLan"/>
    <div class="about_us_img">
      <img :src="bannerImage" alt="" v-if="lang =='zh'">
      <img src="http://qiaoxin.oss-cn-shenzhen.aliyuncs.com/img/groupDisplay/zoujing.png" alt="" v-else>
    </div>
    <div class="about_txt1_title" id="anchor-1">
      <p>{{$i18n.messages[lang].company}}</p>
      <p class="common_p" v-if="lang == 'zh'">COMPANY PROFILE</p>
    </div>
    <div class="about_txt1">
      <p>SINCE 2015</p>
      <p>{{$i18n.messages[lang].qx1}}</p>
      <p>{{$i18n.messages[lang].qx2}}</p>
      <p>{{$i18n.messages[lang].qx3}}</p>
      <!--<p>侨信控股（集团）有限公司（简称侨信集团）是一家综合性企业，旗下涵盖商业投资、地产开发、航空运营、建筑施工、休闲文创等多元化产业模块。</p>-->
      <!--<p>潜观心物平衡，积极追求创新发展；践行公民责任，坚持缔造价值产品。海纳百川，有容乃大，诚信务实，创新奋进，侨信集团致力于成为品质生活的引领者。</p>-->
    </div>
    <div class="com_culture">
      <div class="title">
        <p id="anchor-2">{{$i18n.messages[lang].corCulture}}</p>
        <p class="common_p" v-if="lang == 'zh'">CORPORATE CULTURE</p>
      </div>
      <tab active-color="#fcdaa7" bar-active-color="#fcdaa7" custom-bar-width=".42rem">
        <tab-item v-for="(item, index) in $i18n.messages[lang].tabList" :key="index" :selected="index==activeIndex" @on-item-click="handler(index)">{{item.txt}}</tab-item>
      </tab>
      <swiper auto height="3.33rem" :duration="800" dots-position="center" :show-dots="false" @on-index-change="handleSwiper" v-model="activeIndex">
        <swiper-item v-for="(item, index) in $i18n.messages[lang].swiper" :key="index" style="color: #fcdaa7">
          <h4 v-if="item.txt" :style="lang == 'zh' ? 'font-size: .42rem;' : 'font-size:.32rem'" v-html="item.txt"></h4>
          <ul v-else-if="item.txtList" :style="lang == 'zh' ? 'font-size: .32rem;' : 'font-size: .23rem'">
            <li v-for="(txt, i) in item.txtList">{{txt}}</li>
          </ul>
        </swiper-item>
      </swiper>
    </div>
    <div class="social_duty">
      <div class="title">
        <span style="display: block;" id="anchor-3">{{$i18n.messages[lang].socialTxt}}</span>
        <span class="common_p" style="display: block;" v-if="lang == 'zh'">SCOCIAL RESPONSIBILITY</span>
      </div>
      <p>{{$i18n.messages[lang].socialDuty}}</p>
      <p :style="lang == 'en' ? 'text-align: justify' : ''">{{$i18n.messages[lang].socialDuty1}}</p>
    </div>
    <div class="charity">
      <div class="title">
        <p>{{$i18n.messages[lang].charity}}</p>
        <p class="common_p" v-if="lang == 'zh'">CHARITY NEWS</p>
      </div>
      <swiper loop auto height="3.74rem" :duration="800" style="padding:0 .28rem" dots-position="center">
        <swiper-item  class="swiper-demo-img" v-for="(item, index) in swiperList" :key="index">
          <a @click="handleClickSwiper(item.content, item.title)" style="display:block;height:3.74rem;width:100%;backgroundSize:100%" :style="{backgroundImage: 'url(' +item.img+ ')'}"></a>
        </swiper-item>
      </swiper>
    </div>
    <FixedMask :content="maskContent.content" :title1="maskContent.title1" :lang="lang" :showMask="showMaskFlag" @handleCloseMask="handleCloseMask"/>
    <BottomInfo :lang="lang"/>
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
  import { SwiperItem, Swiper, Tab, TabItem } from 'vux'
  import BottomInfo from "./common/bottomInfo";
  import QxHead from "./common/qxHead";
  import Menu from "./common/menu";
  import FixedMask from "./common/fixedMask.vue";
  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js")

  export default {
    components: {
      SwiperItem,
      Swiper, Tab, TabItem,
      BottomInfo,
      QxHead,
      Menu, FixedMask
    },
    data() {
      return {
        activeIndex: 0,
        showModalFlag: false,
        showMaskFlag: false,
        swiperList: [],
        swiperList1: [{
          txt: "心物平衡，和谐共生"
        }, {
          txt: "品质生活引领者"
        },{
          txt: "缔造价值产品"
        },{
          txt: "<p>平衡<span style='margin-left: .5rem'>能动</span><span style='margin-left: .5rem'>互联</span></p>"
        },{
          txtList: [
            "合作理念：讲信修睦 和气生财",
            "服务理念：以信为本 忠诚如一",
            "品质理念：匠心独运 精益求精",
            "开发理念：和谐共生 格局为先",
            "管理理念：和而不同 善解能容",
            "人才理念：选贤用能 不拘一格"
          ]
        },{
          txt: "<p>诚信<span style='margin-left: .5rem'>务实</span><span style='margin-left: .5rem'>创新</span><span style='margin-left: .5rem'>奋进</span></p>"
        }],
        tabList: [{
          index: 0,
          txt: "价值观"
        },{
          index: 0,
          txt: "企业愿景"
        },{
          index: 0,
          txt: "企业使命"
        },{
          index: 0,
          txt: "企业口号"
        },{
          index: 0,
          txt: "经营理念"
        },{
          index: 0,
          txt: "工作理念"
        }],
        bannerImage: "",
        maskContent: {
            title1: "",
            content: ""
        },
          lang: ""
      }
    },
    mounted() {
        this.lang = this.$i18n.locale
      this.getSliderList()
      setTimeout( () => {
          this.getLocal()
      }, 500)
    },
    methods: {
        getLocal() {
            let select = localStorage.getItem("id")
            if (select) {
                document.querySelector(select).scrollIntoView()
            }
        },
      getMenuList(data) {
        data.map( item => {
          if (item.link == location.pathname) {
            this.bannerImage = "https://qiaoxin.oss-cn-shenzhen.aliyuncs.com"+item.banner_image
          }
        })

      },
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      handleCloseMask(bool) {
          this.showMaskFlag = bool
      },
      getSliderList() {
        let url = CONSTANT.URL.getSliderList;
        common.requestGetAjax(url, {}, {page: '/approach.html'}, (res) => {
          if (res.code == 200) {
              if (this.lang == "zh") {
                  this.swiperList = []
                  res.data.map( item => {
                      this.swiperList.push({
                          url: 'javascript:',
                          img: 'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.image,
                          title: item.title,
                          content: item.desc
                      })
                  })
              } else if(this.lang == 'en') {
                  this.swiperList = []
                  res.data.map( item => {
                      this.swiperList.push({
                          url: 'javascript:',
                          img: 'https://qiaoxin.oss-cn-shenzhen.aliyuncs.com'+item.image,
                          title: item.title_en,
                          content: item.desc_en
                      })
                  })
              }

          }
        })
      },
      handler(index) {
        this.activeIndex = index
      },
      handleSwiper(index) {
//        console.log(index)
        this.handler(index)
      },
      handleClickSwiper(content, title) {
        this.showMaskFlag = true
          this.maskContent = {
              title1: title,
              content: content
          }
      },
        handleChangeLan(lan) {
            this.lang = this.$i18n.locale
            this.getSliderList()
        }
    }
  };
</script>
<style lang="less">
  .about_us {
    /*padding-bottom: 1.31rem;*/
    .about_us_img {
      margin-bottom: .51rem;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .swiper-demo-img {
      a {
        -webkit-background-size: cover!important;
        background-size: cover!important;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    .about_txt1_title {
      color: #2155A0;
      font-size: .38rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: .26rem;
      margin-top: .71rem;
    }
    .about_txt1 {
      /*.title {*/
        /*color: #2155A0;*/
        /*font-size: .38rem;*/
        /*font-weight: bold;*/
        /*text-align: center;*/
        /*margin-bottom: .26rem;*/
        /*margin-top: .71rem;*/
      /*}*/
      p {
        padding: 0 .45rem 0 .28rem;
        text-align: justify;
        &:first-child {
          font-size: .38rem;
          color: #2155A0;
          font-weight: bold;
        }
        &:nth-child(2) {
          font-size: .38rem;
          color: #333;
          font-weight: bold;
          margin-bottom: .41rem;
        }
        &:nth-child(3) {
          font-size: .27rem;
          color: #666;
          margin-bottom: .51rem;
          line-height: .38rem;
        }
        &:last-child {
          font-size: .27rem;
          color: #666;
          margin-bottom: .69rem;
          line-height: .38rem;
        }
      }
    }
    .com_culture {
      width: 100%;
      height: 6.66rem;
      background:  url("../images/culture_bg.jpg") center no-repeat;
      background-size: cover;
      color: #fff;
      .title {
        padding-top: .52rem;
        text-align: center;
        font-size: .38rem;
        font-weight: bold;
        margin-bottom: .3rem;
      }
      .vux-tab {
        background-color: transparent;
        .vux-tab-item {
          color: #fff;
          background: none;
          font-size: .32rem;
        }
        .vux-tab-ink-bar {
          left: 8%;
        }
      }
      .vux-slider {
        margin-top: .2rem;
        font-size: .29rem;
        .vux-swiper-item {
          text-align: center;
          h4 {
            width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    .social_duty {
      text-align: center;
      margin-bottom: .78rem;
      margin-top: .71rem;
      .title {
        color: #2155A0;
        font-size: .38rem;
        font-weight: bold;
      }
      p {
        &:first-of-type {
          font-size: .37rem;
          color: #000;
          margin: .53rem 0 .26rem 0;
        }
        &:last-of-type {
          font-size: .27rem;
          color: #666;
          padding: 0 .47rem;
          line-height: .42rem;
          text-align: left;
        }
      }
    }
    .charity {
      padding: .75rem 0 .53rem 0;
      background-color:#f2f6fa;
      .title {
        margin-bottom: .6rem;
        text-align: center;
        color: #2155A0;
        font-size: .38rem;
        font-weight: bold;
      }
    }
  }
</style>

